<template>
  <div id="app">
    <parser ref="parser" :form-conf="formConf" @submit="sumbitForm1"></parser>
  </div>
</template>

<script>
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
import Parser from "./components/parser/Parser"
import Vue from "vue";

import HelloWorld from "@/components/HelloWorld";

Vue.use(ElementUI)
Vue.component('hello-world', HelloWorld)

function setDefaultData(itemField,data) {
  for(let itemData in data){
    if(itemData==itemField.__vModel__){
      itemField.__config__.defaultValue=data[itemData];
    }
    if(itemField.__config__.hasOwnProperty("children")){
        for(let children of itemField.__config__.children){
          setDefaultData(children,data)
        }
    }
  }
}

export default {
  name: 'App',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Parser,
  },
  data(){
    return {
      formConf: {
          "fields": [],
          "formRef": "elForm",
          "formModel": "formData",
          "size": "mini",
          "labelPosition": "left",
          "labelWidth": 100,
          "formRules": "rules",
          "gutter": 15,
          "disabled": false,
          "span": 24,
          "formBtns": true,
          "unFocusedComponentBorder": true
      },
      // formConf: {
      //   fields: [
      //     {
      //       __config__: {
      //         label: '图片',
      //         labelWidth: null,
      //         showLabel: true,
      //         changeTag: true,
      //         tag: 'el-image',
      //         required: true,
      //         layout: 'colFormItem',
      //         span: 24,
      //         document: 'https://element.eleme.cn/#/zh-CN/component/input',
      //         regList: [
      //           {
      //             pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
      //             message: '手机号格式错误'
      //           }
      //         ]
      //       },
      //       __slot__: {
      //         prepend: '',
      //         append: ''
      //       },
      //       __vModel__: 'arrivePic',
      //       __props__: {
      //         src:'arrivePic'
      //       },
      //       placeholder: '请输入手机号',
      //       lazy:true,
      //       style: {
      //         width: '100%'
      //       },
      //       clearable: true,
      //       'prefix-icon': 'el-icon-mobile',
      //       'suffix-icon': '',
      //       maxlength: 11,
      //       'show-word-limit': true,
      //       readonly: false,
      //       disabled: false,
      //
      //     },
      //       {
      //         __config__: {
      //           label: '图片',
      //           labelWidth: null,
      //           showLabel: true,
      //           changeTag: true,
      //           tag: 'el-image',
      //           required: true,
      //           layout: 'colFormItem',
      //           span: 24,
      //           document: 'https://element.eleme.cn/#/zh-CN/component/input',
      //           regList: [
      //             {
      //               pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
      //               message: '手机号格式错误'
      //             }
      //           ]
      //         },
      //         __slot__: {
      //           prepend: '',
      //           append: ''
      //         },
      //         __vModel__: 'donePic',
      //         __props__: {
      //           src:'donePic'
      //         },
      //         placeholder: '请输入手机号',
      //         lazy:true,
      //         style: {
      //           width: '100%'
      //         },
      //         clearable: true,
      //         'prefix-icon': 'el-icon-mobile',
      //         'suffix-icon': '',
      //         maxlength: 11,
      //         'show-word-limit': true,
      //         readonly: false,
      //         disabled: false,
      //
      //       },
      //   ],
      //   formRef: 'elForm',
      //   formModel: 'formData',
      //   size: 'small',
      //   labelPosition: 'right',
      //   labelWidth: 100,
      //   formRules: 'rules',
      //   gutter: 15,
      //   disabled: false,
      //   span: 24,
      //   formBtns: true,
      //   unFocusedComponentBorder: false
      // }
    }
  },
  methods:{
    sumbitForm1(data){
      console.log(data)
    }
  },
  // mounted() {
  //   console.log(this)
  //   let parser=this.$refs.parser;
  //   // setTimeout(()=>{})
  //   parser[this.formConf.formModel]={mobile:"https://img2022.cnblogs.com/blog/35695/202201/35695-20220120120725399-1531147164.jpg"}
  // }
  mounted() {
      let that=this;
      this.$ajax(
        '/ramoEam/maintenanceOrder/getTask.lc?code=2502'
      ).then(function (response) {
          let parser=that.$refs.parser;
          let formConf=JSON.parse(response.data.data.formRender);
          that.$ajax(
              '/ramoEam/maintenanceOrder/findByMCode.lc',
              {
                  params: {
                      code: "1a25aa"
                  }
              }
          ).then(function (response) {
              let data=response.data.data;
              for( let itemField of formConf.fields){
                  setDefaultData.call(that,itemField,data)
                  // for(let itemData in data){
                  //     if(itemData==itemField.__vModel__){
                  //         itemField.__config__.defaultValue=data[itemData]
                  //     }
                  // }
              }
              that.formConf=formConf
              parser.formData=data


          }).catch(function (error) {
              console.log(error);
          });
      })
      .catch(function (error) {
          console.log(error);
      }).then(function (response) {

    })
  }
}


</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
